<template>
    <div class="app-container">
        <el-row :gutter="10" class="tableBox">
            <el-col :span="12">
                <el-card shadow="hover" class="grid-content bg-purple-border">
                    <!-- 自然年组件 -->
                    <year></year>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" class="grid-content bg-purple-border">
                    <!-- 年度阶段组件 -->
                    <stage :naturalYearDetails="naturalYearDetails"></stage>
                </el-card>
            </el-col>
        </el-row>
        <div v-loading="projectLoading">
            <!-- 年度目标 -->
            <el-form ref="naturalYearDetailsRef" :model="naturalYearDetails">
                <el-row :gutter="15">
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <el-form-item>
                                <div class="targetTitle">比赛成绩目标</div>
                                <el-input type="textarea" v-model="naturalYearDetails.performanceGoal" :autosize="{ minRows: 6 }" placeholder="请输入比赛成绩目标"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <el-form-item>
                                <div class="targetTitle">成绩相关目标</div>
                                <el-input type="textarea" v-model="naturalYearDetails.achievementRelatedIndicators" :autosize="{ minRows: 6 }" placeholder="请输入成绩相关目标"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <el-form-item>
                                <div class="targetTitle">训练过程目标</div>
                                <el-input type="textarea" v-model="naturalYearDetails.trainingProcessObjectives" :autosize="{ minRows: 6 }" placeholder="请输入训练过程目标"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <!-- 对应年度一级科目训练目标 -->
            <el-card>
                <el-row :gutter="10" class="fromYear mb20">
                    <el-col :span="1.5">来自自然年</el-col>
                    <el-col :span="0.5">-</el-col>
                    <el-col :span="1.5">{{ naturalYearDetails.name }}</el-col>
                </el-row>
                <el-tabs v-model="activeName">
                    <el-tab-pane :label="item.projectName" :name="item.projectName" v-for="(item,index) in annualProjectDetailsList" :key="index">
                        <el-form :model="item" :ref="item" :inline="true" label-width="200px">
                            <el-form-item label="训练课总时长(h):" prop="classHour">
                                <el-input v-model="item.classHour"></el-input>
                            </el-form-item>
                            <el-form-item label="训练课总公里数(km):" prop="sumKilometer" v-show="item.projectName == '陆上专项训练(测功仪)' || item.projectName == '水上专项训练'">
                                <el-input v-model="item.sumKilometer"></el-input>
                            </el-form-item>
                            <el-form-item label="男子训练课总公里数(km):" prop="manKilometer" v-show="item.projectName == '陆上专项训练(测功仪)' || item.projectName == '水上专项训练'">
                                <el-input v-model="item.manKilometer"></el-input>
                            </el-form-item>
                            <el-form-item label="男子训练课总时长(h):" prop="manTime" v-show="item.projectName == '陆上专项训练(测功仪)' || item.projectName == '水上专项训练'">
                                <el-input v-model="item.manTime"></el-input>
                            </el-form-item>
                            <el-form-item label="女子训练课总公里数(km):" prop="womenKilometer" v-show="item.projectName == '陆上专项训练(测功仪)' || item.projectName == '水上专项训练'">
                                <el-input v-model="item.womenKilometer"></el-input>
                            </el-form-item>
                            <el-form-item label="女子训练课总时长(h):" prop="womenTime" v-show="item.projectName == '陆上专项训练(测功仪)' || item.projectName == '水上专项训练'">
                                <el-input v-model="item.womenTime"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
        <el-button type="primary" class="saveBtn" @click="submitForm">保存</el-button>
    </div>
</template>

<script>
import { listNaturalYear, getNaturalYear, delNaturalYear, addNaturalYear, updateNaturalYear, exportNaturalYear, } from "@/api/training/naturalYear";
import year from "./components/year.vue";
import stage from "./components/stage.vue";
import { listAnnualPlan, getAnnualPlan, getNaturalYearDetails, } from "@/api/training/annualPlan";
import { listAnnualProject, getAnnualProject, updateAnnualProject } from "@/api/training/annualProject";
import eventBus from "@/components/eventBus.js";

export default {
    name: "NaturalYear",
    data() {
        return {
            projectLoading: false,
            // 所选自然年详情对象
            naturalYearDetails: {},
            activeName: "水上专项训练",
            // 训练项目详情对象
            annualProjectDetailsList: [],
        };
    },
    created() {
        this.getLatestYearDetails();
    },
    mounted() {
        // 接收组件year传递过来的自然年详情
        eventBus.$on("naturalYearDetails", (message) => {
            this.naturalYearDetails = JSON.parse(message);
            this.activeName = "水上专项训练",
                this.getAnnualProjectDetailsList()
        });
    },
    watch: {
        // 监听最新自然年
        // naturalYearDetails: {
        //   handler(newVal, oldVal) {
        //     this.getAnnualProjectDetailsList();
        //   },
        //   deep: true,
        //   immediate: true
        // },
    },
    methods: {
        /** 加载获取最近一年的自然年详情 */
        getLatestYearDetails() {
            listNaturalYear().then((response) => {
                // 获取最新年自然年的id
                const naturalYearList = response.rows;
                const latestYearNum = Math.max.apply(
                    Math,
                    naturalYearList.map((item) => {
                        return item.startTime.slice(0, 4);
                    })
                );
                const latestYear = naturalYearList.filter((array) =>
                    array.startTime.match(latestYearNum)
                )[0];
                const id = latestYear.id;
                // 根据最新自然年id获取自然年详情
                getNaturalYearDetails(id).then((response) => {
                    this.naturalYearDetails = response.data;
                    this.getAnnualProjectDetailsList()
                });

            });
        },
        // 获取某年度项目列表
        getAnnualProjectDetailsList() {
            const id = this.naturalYearDetails.id
            // 如果某年度对应的项目列表为空，创建一个新数组，并给新数组对象中的年id改为对应的年id
            const array = [
                {
                    classHour: '',
                    ctime: '',
                    firstLevel: "special_training_water",
                    id: '',
                    ltime: '',
                    manKilometer: '',
                    manTime: '',
                    naturalYearId: this.naturalYearDetails.id,
                    projectName: "水上专项训练",
                    sumKilometer: '',
                    womenKilometer: '',
                    womenTime: '',
                },
                {
                    classHour: '',
                    ctime: '',
                    firstLevel: "land_specific_training_dynamometer",
                    id: '',
                    ltime: '',
                    manKilometer: '',
                    manTime: '',
                    naturalYearId: this.naturalYearDetails.id,
                    projectName: "陆上专项训练(测功仪)",
                    sumKilometer: '',
                    womenKilometer: '',
                    womenTime: '',
                },
                {
                    classHour: '',
                    ctime: '',
                    firstLevel: "land_strength_training",
                    id: '',
                    ltime: '',
                    manKilometer: '',
                    manTime: '',
                    naturalYearId: this.naturalYearDetails.id,
                    projectName: "陆上身体素质训练",
                    sumKilometer: '',
                    womenKilometer: '',
                    womenTime: '',
                },
                {
                    classHour: '',
                    ctime: '',
                    firstLevel: "aerobic_training_land",
                    id: '',
                    ltime: '',
                    manKilometer: '',
                    manTime: '',
                    naturalYearId: this.naturalYearDetails.id,
                    projectName: "陆上有氧训练",
                    sumKilometer: '',
                    womenKilometer: '',
                    womenTime: '',
                },
                {
                    classHour: '',
                    ctime: '',
                    firstLevel: "regeneration_training",
                    id: '',
                    ltime: '',
                    manKilometer: '',
                    manTime: '',
                    naturalYearId: this.naturalYearDetails.id,
                    projectName: "再生训练",
                    sumKilometer: '',
                    womenKilometer: '',
                    womenTime: '',
                },
                {
                    classHour: '',
                    ctime: '',
                    firstLevel: "injury_treatment",
                    id: '',
                    ltime: '',
                    manKilometer: '',
                    manTime: '',
                    naturalYearId: this.naturalYearDetails.id,
                    projectName: "伤病治疗",
                    sumKilometer: '',
                    womenKilometer: '',
                    womenTime: '',
                },
                {
                    classHour: '',
                    ctime: '',
                    firstLevel: "physical_preparation_training",
                    id: '',
                    ltime: '',
                    manKilometer: '',
                    manTime: '',
                    naturalYearId: this.naturalYearDetails.id,
                    projectName: "身体准备训练",
                    sumKilometer: '',
                    womenKilometer: '',
                    womenTime: '',
                },
                {
                    classHour: '',
                    ctime: '',
                    firstLevel: "no_training",
                    id: '',
                    ltime: '',
                    manKilometer: '',
                    manTime: '',
                    naturalYearId: this.naturalYearDetails.id,
                    projectName: "无训练",
                    sumKilometer: '',
                    womenKilometer: '',
                    womenTime: '',
                }]
            this.projectLoading = true;
            getAnnualProject(id).then((response) => {
                if (response.data.length > 0) {
                    this.annualProjectDetailsList = response.data;
                } else {
                    this.annualProjectDetailsList = array
                }
                this.projectLoading = false;
            })
        },
        // 点击保存按钮
        submitForm() {
            // 修改自然年目标详情
            this.projectLoading = true;
            updateNaturalYear(this.naturalYearDetails).then((response) => {
                if (response.code === 200) {
                    if (this.annualProjectDetailsList.length > 0) {  // 如果自然年下面存在有训练科目，调用修改接口,否则调用添加接口
                        updateAnnualProject(this.annualProjectDetailsList).then((response) => {
                            if (response.code === 200) {
                                this.msgSuccess("保存成功");
                                this.projectLoading = false;
                            } else {
                                this.msgError(response.msg);
                                this.projectLoading = false;
                            }
                        });
                    } else {
                        addAnnualProject(this.annualProjectDetailsList).then((response) => {
                            if (response.code === 200) {
                                this.msgSuccess("保存成功");
                                this.projectLoading = false;
                            } else {
                                this.msgError(response.msg);
                                this.projectLoading = false;
                            }
                        });
                    }
                } else {
                    this.msgError(response.msg);
                    this.projectLoading = false;
                }
            });
        }
    },
    components: {
        year,
        stage,
    },
};
</script>

<style lang="scss" scoped>
.tableBox {
    margin-bottom: 20px;
    .el-card-body {
        height: 440px;
        box-sizing: border-box;
        overflow: auto;
    }
}
.targetTitle {
    text-align: center;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    margin-bottom: 15px;
}
.fromYear {
    height: 30px;
    line-height: 30px;
    color: #67c23a;
    font-size: 14px;
}
.saveBtn {
    width: 150px;
    display: block;
    margin: 30px auto;
}
</style>